<!DOCTYPE html>

<html>
<head>
    <title>顶点概念几何图形</title>
    <script type="text/javascript" src="../../three.js/build/three.js"></script>

    <!--鼠标控制-->
    <script type="text/javascript" src="../../three.js/examples/js/controls/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    // 创建场景对象
    var scene = new THREE.Scene();

    // 创建网格模型
    var geometry = new THREE.BufferGeometry();// 创建一个buffer类型的几何体对象

    // 创建顶点数组
    var vertices = new Float32Array([// （x红,y绿,z蓝）
        0,0,0, // 坐标1
        200,0,0, // 坐标2
        0,200,0, // 坐标3

        0,0,20, // 坐标4
        0,0,200, // 坐标5
        200,0,20, // 坐标6
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3);// 3个一组，表示空间坐标
    // 设置几何体坐标位置属性
    geometry.attributes.position = attribue;

    // 类型数组创建顶点颜色clolor数组
    var colors = new Float32Array([
        1,0,0, // 顶点1 颜色：(红)
        0,1,0, // 顶点2 颜色：(绿)
        0,0,1, // 顶点3 颜色：(蓝)

        1,1,0, // 顶点4 颜色：(黄)
        0,1,1, // 顶点5 颜色：(青)
        1,0,1, // 顶点6 颜色：(紫)
    ]);
    // 设置几何体attributes属性的颜色color属性
    geometry.attributes.color = new THREE.BufferAttribute(colors, 3);// 3个一组表示一个顶点的颜色

    // 1.点渲染模式
    var pointMaterial = new THREE.PointsMaterial({
        vertexColors: THREE.VertexColors, // 以顶点颜色为准
        size: 5.0
    });
    var points = new THREE.Points(geometry, pointMaterial);// 点模型对象
    scene.add(points);

    // 2.线条渲染模式
    var lineMaterial = new THREE.LineBasicMaterial({
        vertexColors: THREE.VertexColors, // 以顶点线性渐变
    });
    var lines = new THREE.Line(geometry, lineMaterial);// 01,12,23,34,45 五条线
    scene.add(lines);

    // 3.三角面(网格)渲染模式
    var material = new THREE.MeshBasicMaterial({ // 012，345 两个面
        vertexColors: THREE.VertexColors, // 以顶点线性渐变
        side: THREE.DoubleSide // 两面可见
    });
    var mesh = new THREE.Mesh(geometry, material); // 网格模型对象(面)
    scene.add(mesh);

    // 辅助坐标系
    var axisHelper = new THREE.AxesHelper(1000);
    // scene.add(axisHelper);

    // 点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400,200,300);// 点光源位置
    scene.add(point);

    // 环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    // 相机设置
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width/height;
    var s = 200;// 三维场景显示范围控制系数，系数越大，显示范围越大
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);// 相机位置
    camera.lookAt(scene.position);// 设置相机方向

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);// 设置渲染区域大小
    renderer.setClearColor(0xb9d3ff, 1);// 设置背景色
    document.body.appendChild(renderer.domElement);// body 元素中插入

    function iRenderer(){
        // 执行渲染
        renderer.render(scene, camera);

        requestAnimationFrame(iRenderer);
    }
    iRenderer();
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
</script>
</body>
</html>